<template>
  <div class="container">
    <h1>充值申请</h1>
    <div class="header" style="margin-bottom: 20px">
      <div class="input">
        <a-input placeholder="电话号码" v-model="phone" />
      </div>
      <a-button type="primary" icon="search" @click="serach">搜索</a-button>
      <a-button
        type="primary"
        icon="redo"
        @click="refresh"
        style="margin-left: 20px"
        >刷新</a-button
      >
    </div>
    <a-table
      :columns="columns"
      :data-source="rows"
      :scroll="{ x: 1500, y: 300 }"
      :rowKey="(record) => record.id"
    >
      <!-- <span slot="img" slot-scope="record">{{ voucher_img(record) }}</span> -->
      <span slot="img" slot-scope="record">
        <img :src="voucher_img(record)" alt="" />
      </span>

      <span slot="state" slot-scope="record">
        <span v-if="record == 0">未审核</span>
        <span v-if="record == 1">审核通过</span>
        <span v-if="record == 2">审核拒绝</span>
      </span>

      <a-space
        size="8"
        slot="action"
        slot-scope="text, record"
        style="display: flex; justify-content: space-between"
        v-show="button(record)"
      >
        <a-button type="primary" slot="action" @click="agree(record)">
          同意
        </a-button>
        <a-button type="danger" slot="action" @click="refuse(record)">
          拒绝
        </a-button>
      </a-space>
    </a-table>
    <div class="popup" v-show="agree_popup">
      <p class="title">是否同意？</p>
      <div class="buttons">
        <a-button type="danger" slot="action" @click="cancel()">
          <a-icon type="exclamation" />
          取消
        </a-button>
        <a-button type="primary" slot="action" @click="agree_confirm()">
          <a-icon type="check" />
          确定
        </a-button>
      </div>
    </div>

    <div class="popup" v-show="refuse_popup">
      <a-input placeholder="拒绝原因" class="meau" v-model="meau" />
      <div class="buttons">
        <a-button type="danger" slot="action" @click="cancel()">
          取消
        </a-button>
        <a-button type="primary" slot="action" @click="refuse_confirm()">
          确定
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "订单编号",
    width: 100,
    dataIndex: "transaction_number",
    key: "transaction_number",
    fixed: "left",
  },
  { title: "姓名", width: 100, dataIndex: "name", key: "name", fixed: "left" },
  { title: "电话", dataIndex: "phone", key: "phone", width: 150 },
  { title: "ID", dataIndex: "id", key: "id" },
  { title: "用户id", dataIndex: "user_id", key: "user_id" },
  {
    title: "支付账号",
    dataIndex: "payment_account",
    key: "payment_account",
    width: 150,
  },
  {
    title: "充值时间",
    dataIndex: "creation_date",
    key: "creation_date",
    width: 150,
  },
  {
    title: "充值金额",
    dataIndex: "recharge_amount",
    key: "recharge_amount",
    width: 150,
  },
  {
    title: "凭证",
    dataIndex: "submit_credentials",
    key: "submit_credentials",
    scopedSlots: { customRender: "img" },
  },
  {
    title: "拒绝原因",
    dataIndex: "reason_rejection",
    width: 150,
    key: "reason_rejection",
  },
  {
    title: "审核状态",
    dataIndex: "pay_status",
    key: "pay_status",
    scopedSlots: { customRender: "state" },
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    fixed: "right",
    width: 180,
    scopedSlots: { customRender: "action" },
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
import { mapState, createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("record");
import http from "@/utils/global";
export default {
  data() {
    return {
      data,
      columns,
      http: http,
      refuse_popup: false,
      agree_popup: false,
      info: {},
      meau: "",
      phone: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapActions(["recharge_agree", "recharge_refuse"]),
    getList() {
      this.phone = "";
      this.$store.dispatch("record/recharge");
    },
    voucher_img(img) {
      console.log(img);
      //   let url = `${this.http.httpUrlFile}?file=${img}`;
      //   let url = `${http.httpUrlFile}?file=${img}`
      //   let url = "data:image/png;base64," + img;
      //   console.log(url);
      //   return url;
    },
    agree(item) {
      this.agree_popup = !this.agree_popup;
      this.info = item;
    },
    refuse(item) {
      this.refuse_popup = !this.refuse_popup;
      this.info = item;
    },
    cancel() {
      this.agree_popup = false;
      this.refuse_popup = false;
    },
    async agree_confirm() {
      let result = {
        userId: this.info.user_id,
        rechargeAmount: this.info.recharge_amount,
        payStatus: 1,
        id: this.info.id,
      };
      this.agree_popup = !this.agree_popup;
      this.$store.commit("record/modify", result);
      const success = await this.recharge_agree();
      if (success) {
        this.$message.success("提现成功");
        this.getList();
      } else {
        this.$message.error("提现失败");
      }
    },
    async refuse_confirm() {
      let result = {
        userId: this.info.user_id,
        rechargeAmount: this.info.recharge_amount,
        payStatus: 2,
        rejectNote: this.meau,
        id: this.info.id,
      };
      this.refuse_popup = !this.refuse_popup;
      this.$store.commit("record/modify", result);
      const success = await this.recharge_refuse();
      if (success) {
        this.$message.success("成功");
        this.getList();
      } else {
        this.$message.error("失败");
      }
    },
    button(item) {
      if (item.pay_status == 0) {
        return true;
      } else {
        return false;
      }
    },
    serach() {
      if (this.phone.length == 11) {
        this.$store.commit("record/phone", this.phone);
        this.$message.success("已更新");
        this.getList();
      } else {
        this.$message.error("手机格式不正确");
      }
    },
    refresh() {
      this.$store.commit("record/phone", "");
      this.getList();
    },
  },
  computed: {
    ...mapState({
      rows: (state) => state.record.rows,
      total: (state) => state.record.total,
    }),
  },
};
</script>

<style>
h1 {
  color: blue;
}
.header {
  display: flex;
}
.input {
  width: 200px;
  display: flex;
  margin: 0 10px 0 0;
}
.popup {
  border-radius: 15px;
  background-clip: padding-box;
  width: 300px;
  height: 150px;
  padding: 15px 35px 15px 35px;
  background: #fefefe;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.title {
  text-align: center;
  margin-top: 20px;
}
.meau {
  margin: 20px 0;
}
</style>
